<template>
    <view>
        <!-- 地址 -->
        <navigator url="/pages/address/address?source=1" class="address-section">
            <view class="order-content">
                <text class="yticon icon-shouhuodizhi"></text>
                <view class="cen" v-if="!empty">
                    <view class="top">
                        <text class="name">{{addressData.consignee}}</text>
                        <text class="mobile">{{addressData.mobile}}</text>
                    </view>
                    <text class="address">{{addressData.address}}</text>
                </view>
                <view class="cen" v-if="empty">
                    <view class="top">
                        <text class="name">添加收货地址</text>
                    </view>
                    <text class="address">添加收货地址</text>
                </view>
                <text class="yticon icon-you"></text>
            </view>

            <image class="a-bg"
                   src=""></image>
        </navigator>

        <view class="goods-section">
            <!-- 商品列表 -->
            <view class="g-item" v-for="(item,index) in order_goods" :key="index">
                <image :src="item.src"></image>
                <view class="right">
                    <text class="title clamp">{{item.goods_name}}</text>
                    <text v-if="item.type!='single'" class="spec">{{item.name}}</text>
                    <view class="price-box">
                        <text class="price">￥{{item.price}}</text>
                        <text class="number">x {{item.count}}</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 优惠明细 -->
        <!-- 金额明细 -->
        <view class="yt-list">
            <view class="yt-list-cell b-b">
                <text class="cell-tit clamp">商品金额</text>
                <text class="cell-tip">￥{{total}}</text>
            </view>
            <view class="yt-list-cell b-b">
                <text class="cell-tit clamp">运费</text>
                <text class="cell-tip">免运费</text>
            </view>
            <view class="yt-list-cell desc-cell">
                <text class="cell-tit clamp">备注</text>
                <input class="desc" type="text" v-model="desc" placeholder="请填写备注信息" placeholder-class="placeholder"/>
            </view>
        </view>

        <!-- 底部 -->
        <view class="footer">
            <view class="price-content">
                <text>实付款</text>
                <text class="price-tip">￥</text>
                <text class="price">{{total}}</text>
            </view>
            <text class="submit" @click="submit">提交订单</text>
        </view>

    </view>
</template>

<script>
  import { getAddressList, del_address, setDefaultAddress, addAddress } from '@/api/user'

  import { addOrder } from '@/api/order'

  export default {
    data () {
      return {
        maskState: 0, //优惠券面板显示状态
        desc: '', //备注
        payType: 1, //1微信 2支付宝
        empty: true,
        addressData: {},
        order_goods: [],
        total: 0,
        order_id: 0,
      }
    },
    async onLoad (option) {
      this.server.checkLogin()
      //商品数据
      this.order_goods = JSON.parse(option.data).goodsData
      if (!this.order_goods instanceof Array) {
        this.order_goods = []
      }
      if (this.order_goods.length <= 0) {
        uni.switchTab({url: `/pages/cart/cart`})
      }
      this.calcTotal()
      await this.loadData()
    },
    async onShow () {
      this.server.checkLogin()
      //商品数据
      await this.loadData()
    },
    methods: {
      async loadData () {
        let address = (await getAddressList()).result
        if (!this.server._isEmpty(address) && (address instanceof Array) && address.length > 0) {
          this.addressData = address.filter(item => {
            if (parseInt(item.is_default) === 1) {
              return item
            }
          })
          if (this.addressData instanceof Array && this.addressData.length > 0) {
            this.addressData = this.addressData[0]
            this.empty=false
          } else {
            this.empty = true
          }
        }
      },
      //计算总价
      calcTotal () {
        let list = this.order_goods
        if (this.server._isEmpty(list) || list.length === 0 || !(list instanceof Array)) {
          return
        }
        let total = 0
        list.forEach(item => {
          total += item.price * item.count
        })
        this.total = Number(total.toFixed(2))
      },
      submit () {
        if (this.server._isEmpty(this.addressData) || this.server._isEmpty(this.addressData.mobile)) {
          this.server.msg('请填写收货信息')
          return
        }
        if (!this.order_goods instanceof Array || this.order_goods.length <= 0) {
          this.server.msg('请添加商品')
          return
        }
        if (this.order_id > 0) {
          uni.redirectTo({
            url: '/pages/money/pay?order_id=${order_id}',
          })
          return
        }
        let that = this
        addOrder({addressData: this.addressData, order_goods: this.order_goods}, function (res) {
          if (parseInt(res.data.status) !== 0) {
            that.server.msg(res.data.msg)
            return
          }
          that.server.initCartInfo()
          that.order_id = res.data.result
          let order_id = that.order_id
          uni.redirectTo({
            url: `/pages/money/pay?order_id=${order_id}`,
          })
        })

      },
      stopPrevent () {},
    },
  }
</script>

<style lang="scss">
    page {
        background: $page-color-base;
        padding-bottom: 100upx;
    }

    .address-section {
        padding: 30upx 0;
        background: #fff;
        position: relative;

        .order-content {
            display: flex;
            align-items: center;
        }

        .icon-shouhuodizhi {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 90upx;
            color: #888;
            font-size: 44upx;
        }

        .cen {
            display: flex;
            flex-direction: column;
            flex: 1;
            font-size: 28upx;
            color: $font-color-dark;
        }

        .name {
            font-size: 34upx;
            margin-right: 24upx;
        }

        .address {
            margin-top: 16upx;
            margin-right: 20upx;
            color: $font-color-light;
        }

        .icon-you {
            font-size: 32upx;
            color: $font-color-light;
            margin-right: 30upx;
        }

        .a-bg {
            position: absolute;
            left: 0;
            bottom: 0;
            display: block;
            width: 100%;
            height: 5upx;
        }
    }

    .goods-section {
        margin-top: 16upx;
        background: #fff;
        padding-bottom: 1px;

        .g-header {
            display: flex;
            align-items: center;
            height: 84upx;
            padding: 0 30upx;
            position: relative;
        }

        .logo {
            display: block;
            width: 50upx;
            height: 50upx;
            border-radius: 100px;
        }

        .name {
            font-size: 30upx;
            color: $font-color-base;
            margin-left: 24upx;
        }

        .g-item {
            display: flex;
            margin: 20upx 30upx;

            image {
                flex-shrink: 0;
                display: block;
                width: 140upx;
                height: 140upx;
                border-radius: 4upx;
            }

            .right {
                flex: 1;
                padding-left: 24upx;
                overflow: hidden;
            }

            .title {
                font-size: 30upx;
                color: $font-color-dark;
            }

            .spec {
                font-size: 26upx;
                color: $font-color-light;
            }

            .price-box {
                display: flex;
                align-items: center;
                font-size: 32upx;
                color: $font-color-dark;
                padding-top: 10upx;

                .price {
                    margin-bottom: 4upx;
                }
                .number {
                    font-size: 26upx;
                    color: $font-color-base;
                    margin-left: 20upx;
                }
            }

            .step-box {
                position: relative;
            }
        }
    }

    .yt-list {
        margin-top: 16upx;
        background: #fff;
    }

    .yt-list-cell {
        display: flex;
        align-items: center;
        padding: 10upx 30upx 10upx 40upx;
        line-height: 70upx;
        position: relative;

        &.cell-hover {
            background: #fafafa;
        }

        &.b-b:after {
            left: 30upx;
        }

        .cell-icon {
            height: 32upx;
            width: 32upx;
            font-size: 22upx;
            color: #fff;
            text-align: center;
            line-height: 32upx;
            background: #f85e52;
            border-radius: 4upx;
            margin-right: 12upx;

            &.hb {
                background: #ffaa0e;
            }

            &.lpk {
                background: #3ab54a;
            }

        }

        .cell-more {
            align-self: center;
            font-size: 24upx;
            color: $font-color-light;
            margin-left: 8upx;
            margin-right: -10upx;
        }

        .cell-tit {
            flex: 1;
            font-size: 26upx;
            color: $font-color-light;
            margin-right: 10upx;
        }

        .cell-tip {
            font-size: 26upx;
            color: $font-color-dark;

            &.disabled {
                color: $font-color-light;
            }

            &.active {
                color: $base-color;
            }
            &.red {
                color: $base-color;
            }
        }

        &.desc-cell {
            .cell-tit {
                max-width: 90upx;
            }
        }

        .desc {
            flex: 1;
            font-size: $font-base;
            color: $font-color-dark;
        }
    }

    /* 支付列表 */
    .pay-list {
        padding-left: 40upx;
        margin-top: 16upx;
        background: #fff;
        .pay-item {
            display: flex;
            align-items: center;
            padding-right: 20upx;
            line-height: 1;
            height: 110upx;
            position: relative;
        }
        .icon-weixinzhifu {
            width: 80upx;
            font-size: 40upx;
            color: #6BCC03;
        }
        .icon-alipay {
            width: 80upx;
            font-size: 40upx;
            color: #06B4FD;
        }
        .icon-xuanzhong2 {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60upx;
            height: 60upx;
            font-size: 40upx;
            color: $base-color;
        }
        .tit {
            font-size: 32upx;
            color: $font-color-dark;
            flex: 1;
        }
    }

    .footer {
        position: fixed;
        left: 0;
        bottom: 0;
        z-index: 995;
        display: flex;
        align-items: center;
        width: 100%;
        height: 90upx;
        justify-content: space-between;
        font-size: 30upx;
        background-color: #fff;
        z-index: 998;
        color: $font-color-base;
        box-shadow: 0 -1px 5px rgba(0, 0, 0, .1);
        .price-content {
            padding-left: 30upx;
        }
        .price-tip {
            color: $base-color;
            margin-left: 8upx;
        }
        .price {
            font-size: 36upx;
            color: $base-color;
        }
        .submit {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 280upx;
            height: 100%;
            color: #fff;
            font-size: 32upx;
            background-color: $base-color;
        }
    }

    /* 优惠券面板 */
    .mask {
        display: flex;
        align-items: flex-end;
        position: fixed;
        left: 0;
        top: var(--window-top);
        bottom: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0);
        z-index: 9995;
        transition: .3s;

        .mask-content {
            width: 100%;
            min-height: 30vh;
            max-height: 70vh;
            background: #f3f3f3;
            transform: translateY(100%);
            transition: .3s;
            overflow-y: scroll;
        }
        &.none {
            display: none;
        }
        &.show {
            background: rgba(0, 0, 0, .4);

            .mask-content {
                transform: translateY(0);
            }
        }
    }

    /* 优惠券列表 */
    .coupon-item {
        display: flex;
        flex-direction: column;
        margin: 20upx 24upx;
        background: #fff;
        .con {
            display: flex;
            align-items: center;
            position: relative;
            height: 120upx;
            padding: 0 30upx;
            &:after {
                position: absolute;
                left: 0;
                bottom: 0;
                content: '';
                width: 100%;
                height: 0;
                border-bottom: 1px dashed #f3f3f3;
                transform: scaleY(50%);
            }
        }
        .left {
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex: 1;
            overflow: hidden;
            height: 100upx;
        }
        .title {
            font-size: 32upx;
            color: $font-color-dark;
            margin-bottom: 10upx;
        }
        .time {
            font-size: 24upx;
            color: $font-color-light;
        }
        .right {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 26upx;
            color: $font-color-base;
            height: 100upx;
        }
        .price {
            font-size: 44upx;
            color: $base-color;
            &:before {
                content: '￥';
                font-size: 34upx;
            }
        }
        .tips {
            font-size: 24upx;
            color: $font-color-light;
            line-height: 60upx;
            padding-left: 30upx;
        }
        .circle {
            position: absolute;
            left: -6upx;
            bottom: -10upx;
            z-index: 10;
            width: 20upx;
            height: 20upx;
            background: #f3f3f3;
            border-radius: 100px;
            &.r {
                left: auto;
                right: -6upx;
            }
        }
    }

</style>
